<template>
	<view>
		<u-navbar :safeAreaInsetTop="safeAreaInsetTop" :placeholder="placeholder" :fixed="fixed" :border="border"
			:leftIcon="leftIcon" :leftText="leftText" :rightText="rightText" :rightIcon="rightIcon" :title="title"
			:bgColor="bgColor" :isbgColor="isbgColor" :titleWidth="titleWidth" :height="height" :leftIconSize="leftIconSize"
			:leftIconColor="leftIconColor" :autoBack="autoBack" :titleStyle="titleStyle" @leftClick="handleLeftClick"
			@rightClick="handleRightClick">
			<template slot="left">
				<slot name="left">
					<template v-if="usericon">
						<image src="/static/icon/cehuozhan.svg" alt="" style="width: 40rpx;height: 40rpx;" />
					</template>
				</slot>
			</template>
		
			<template slot="center">
				<slot name="center"></slot>
			</template>
			
			<template slot="right">
				<slot name="right">
					<template v-if="friendicon">
						<image src="/static/icon/haoyoutu.svg" alt="" style="width: 40rpx;height: 40rpx;" />
					</template>
				</slot>
			</template>
		</u-navbar>
		<u-popup :show="show" bgColor="#121325" @close="show = false"  mode="left" safeAreaInsetTop>
			<cl-user @close="show = false" v-if="show"></cl-user>
		</u-popup>
		
		<chunLei-popups v-model="friendPop" :popData="friendPopData" @tapPopup="tapPopup" :x="355" :y="32 + $u.sys().statusBarHeight" placement="top-end">
		</chunLei-popups>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'navbar',
		data() {
			return {
				show:false,
				friendPop:false,
				friendPopData:[
					{
						title:this.$t("group.group_create.title"),
						value:'group_create',
						icon:'/static/icon/chuangjianqun.svg'
					},
					{
						title:this.$t("addfriendDetails.addFriend"),
						value:'add_friend',
						icon:'/static/icon/tianjiahaoyou.svg'
					},
					{
						title:this.$t("addressbook.index.title"),
						value:'contact_person',
						icon:'/static/icon/lianxiren.svg'
					},
				],
			}
		},
		props: {
			//用户信息左侧按钮
			usericon: {
				type: Boolean,
				default: false,
			},
			//好友左侧按钮
			friendicon: {
				type: Boolean,
				default: false,
			},
			safeAreaInsetTop: {
				type: Boolean,
				default: true,
			},
			placeholder: {
				type: Boolean,
				default: false,
			},
			fixed: {
				type: Boolean,
				default: true,
			},
			border: {
				type: Boolean,
				default: false,
			},
			leftIcon: {
				type: String,
				default: 'arrow-left',
			},
			isbgColor: {
				type: Boolean,
				default: true,
			},
			leftText: {
				type: String,
				default: '',
			},
			rightText: {
				type: String,
				default: '',
			},
			rightIcon: {
				type: String,
				default: '',
			},
			title: {
				type: String,
				default: '',
			},
			bgColor: {
				type: String,
				default: '#121325',
			},
			titleWidth: {
				type: [String, Number],
				default: '400rpx',
			},
			height: {
				type: [String, Number],
				default: '44px',
			},
			leftIconSize: {
				type: [String, Number],
				default: '18px',
			},
			leftIconColor: {
				type: String,
				default: '#fff',
			},
			autoBack: {
				type: Boolean,
				default: false,
			},
			titleStyle: {
				type: [String, Object],
				default: () => {
					return {
						color: '#fff',
						fontSize: '32rpx'
					}
				},
			},
		},
		emits: ['leftClick', 'rightClick'],
		methods: {
			handleLeftClick() {
				this.$emit('leftClick');
				if (this.autoBack && !this.usericon) {
					uni.navigateBack();
				}
				if(this.usericon){
					this.show = true
				}
			},
			handleRightClick() {
				if(this.friendicon){
					
					this.friendPop = !this.friendPop
				}
				this.$emit('rightClick');
			},
			tapPopup(e){
				switch (e.value){
					case 'group_create':
						this.$Router.push({
							name: 'group_create'
						});
						break;
					case 'add_friend':
						this.$Router.push({
							name: 'add_friend'
						});
						break;
					case 'contact_person':
						this.$Router.push({
							name: 'addressbook'
						});
						break;
					default:
						break;
				}
				console.log(e);
			},
			close(){
				this.show = false
			}
		},
	};
</script>